import React, { useCallback } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Link } from 'react-router-dom'
import { RootState } from '@/reducers'
import { add, minus, asyncAdd } from '@/actions/counter'
import styles from './index.module.scss'

const Home = () => {
  const counter = useSelector((state: RootState) => state.counter)
  const dispatch = useDispatch()
  const handleAdd = useCallback(() => dispatch(add()), [dispatch])
  const handleMinus = useCallback(() => dispatch(minus()), [dispatch])
  const handleAsyncAdd = useCallback(() => dispatch(asyncAdd()), [dispatch])

  return (
    <div>
      <button className={styles.home__btn} onClick={handleAdd}>+</button>
      <div className={styles.home__num}>{counter.num}</div>
      <button className={styles.home__btn} onClick={handleMinus}>-</button>
      <button className={styles.home__btn} onClick={handleAsyncAdd}>async</button>
      <Link to='/about'>
        <button className={styles.home__btn}>about</button>
      </Link>
    </div>
  )
}

export default Home
